<!--
 * @Author: your name
 * @Date: 2021-04-07 15:56:57
 * @LastEditTime: 2021-04-27 19:06:41
 * @LastEditors: Please set LastEditors
 * @Description: 联系我们
 * @FilePath: /medicine-web/src/views/connect/index.vue
-->
<template>
  <div class="connect-us-container">
    <p class="connect-us-title">联系我们</p>
    <div class="connect-us-subtitle">欢迎有问题随时咨询我们，可以讲您的联系方式通过留言板进行留言</div>
    <!-- 溶瘤病毒数据库 -->
    <p class="connect-us-database" v-html="content"></p>
    <!-- <a-row style="margin-bottom: 53px;" v-for="item in connectList.length > 0 ? parseInt(connectList.length / 2) : 0" :key="item.id">
      <a-col :span="12" class="connect-us__content">
        <div class="connect-us__partment">{{connectList[2 * item - 2].partment}}</div>
        <div class="connect-us__person" v-for="o in connectList[2 * item - 2].member" :key="o.id">
          <span>联系人：{{o.name}}</span>
          <span>联系方式：{{o.connect}}</span>
          <span>QQ：{{o.qq}}</span>
          <span>邮箱：{{o.mail}}</span>
        </div>
      </a-col>
      <a-col :span="12" class="connect-us__content">
        <div class="connect-us__partment">{{connectList[2 * item - 1].partment}}</div>
        <div class="connect-us__person" v-for="o in connectList[2 * item - 1].member" :key="o.id">
          <span>联系人：{{o.name}}</span>
          <span>联系方式：{{o.connect}}</span>
          <span>QQ：{{o.qq}}</span>
          <span>邮箱：{{o.mail}}</span>
        </div>
      </a-col>
    </a-row> -->
  </div>
</template>
<script>
export default {
  name: 'connectUs',
  data () {
    return {
      connectList: [
        { id: 1, partment: 'XXX部门1', member: [{ id: 5, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }, { id: 6, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }] },
        { id: 2, partment: 'XXX部门2', member: [{ id: 7, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }, { id: 8, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }] },
        { id: 3, partment: 'XXX部门3', member: [{ id: 9, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }, { id: 10, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }] },
        { id: 4, partment: 'XXX部门4', member: [{ id: 11, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }, { id: 12, name: '张三', connect: '13900000000 拷贝', qq: 'XXXXXXXXXX', mail: 'XXXXX@xxxx.com' }] }
      ],
      content: ''
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    async fetchData () {
      const res = await this.$action('getSinglePageData', { id: 4 })
      if (res && Object.keys(res).length > 0) {
        this.content = res.content
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.connect-us-container {
  width: 80rem;
  padding: 58px 0px 121px 0px;
  margin: 0 auto;
  min-height: calc(100vh - 558px);
  .connect-us-title {
    text-align: center;
    font-size: 1.25rem;
    color: #555555;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .connect-us-subtitle {
    text-align: center;
    font-size: 0.875rem;
    color: #ccc;
  }
  .connect-us-database {
    font-size: 1.25rem;
    color: #555555;
    font-weight: bold;
    margin-bottom: 24px;
    margin-top: 23px;
  }
  .connect-us__content {
    font-size: 0.875rem;
    color: #555;
    .connect-us__person {
      margin-top: 12px;
    }
  }
}
</style>
